<template>
  <div class="lunbo" @mouseleave="leave">
    <!--已知在高等级为三级标签 -->
    <div class="goodType">
      <ul>
        <li
          v-for="item in goodTypeList"
          :key="item.value"
          @mouseenter="chagechilist(item)"
        >{{item.label}}</li>
      </ul>
    </div>

    <el-carousel indicator-position="outside" class="out">
      <el-carousel-item v-for="item in CarouselList " :key="item.carouselId">
        <!-- 二级 -->
        <div class="goodTypeChildren" v-show="childrenVisible">
          <ul>
            <div v-for="item in childrenTypeList" :key="item.value">
              <!--遍历二级标签 -->
              <div class="TypeTwo">
                <p>{{item.label}}</p>
                <!-- 遍历三级标签 -->
                <div
                  v-for="childrenitem in item.children"
                  :key="childrenitem.value"
                  class="TypeThree"
                >
                  <router-link
                    :to="{ name:'SearchByType',query:{'typeId':childrenitem.value} }"
                  >{{childrenitem.label}}</router-link>
                </div>
              </div>
            </div>
          </ul>
        </div>
        <img
          :src="item.carouselImgUrl"
          width="1000px"
          height="300px"
          alt="图片丢失了"
          @click="$router.push(item.carouselRedirectUrl)"
        />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { getCarouel, getGoodType } from "../api/requestapi";
export default {
  name: "LunBo",

  data() {
    return {
      //轮播图
      CarouselList: [],
      //所有分类
      goodTypeList: [],

      //父菜单的子菜单
      childrenTypeList: [],

      //控制子分类是否显示
      childrenVisible: false,
    };
  },

  methods: {
    //去除树型结构的children树型 参数为父节点
    removeChildren(node) {
      // 假设没有长度 或children 长度为0 删除该属性
      if (!node.children || !node.children.length) {
        delete node.children;
        // 要记得返回不然报错
        return;
      }

      // 遍历children 继续删除
      for (var item of node.children) {
        this.removeChildren(item);
      }

      return node;
    },

    //悬浮时 显示
    chagechilist(item) {
      //修改变量
      this.childrenVisible = true;
      //赋值
      this.childrenTypeList = item.children;
    },

    leave() {
      this.childrenVisible = false;
    },
  },

  created() {
    getCarouel().then((response) => {
      this.CarouselList = response.data;
    });

    // 加载所有标签
    getGoodType().then((res) => {
      // 遍历父节点进行删除children  in 遍历拿数组索引 of 遍历 拿数组对象

      let list = res.data;

      console.log(list);

      for (var item of list) {
        console.log(item);
        this.removeChildren(item);
      }
      this.goodTypeList = list;
    });
  },
};
</script>

<style>
.lunbo {
  width: 1700px;
  margin: 30px auto;
  display: block;
  height: 300px;
}

.goodType {
  float: left;
  font-size: 20px;
  width: 500px;
  height: 300px;
  border: 2px #99a9bf;
}
ul {
  list-style: none;
}
img {
  z-index: 1;
  width: 1000px;
}

.goodType li {
  margin-top: 20px;
}

.goodTypeChildren {
  float: left;
  width: 1000px;
  height: 300px;
  position: absolute;
  background: #fcfcfcec;
}

.goodTypeChildren li {
  margin-left: 10px;
  float: left;
}

.TypeTwo {
  height: 50px;
  margin-bottom: 10px;
  font-family: "Courier New", Courier, monospace;
}
.TypeThree {
  float: left;
  margin-right: 20px;
}

.out {
  width: 1100px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>